<template>
	<div v-if="detail">
		<NewSearchDetail v-model="visible" :title="title">
			<div class="car-popup-cont-right">
				<div class="people-search-detail-right detail-popup-right">
					<div class="right-top">
						<div class="popup-title border-bottom right-top-nav">
							基本信息
						</div>
						<div class="right-top-row2">
							<div class="right-top-row2-title">
								<img src="../../../../assets/new/new_plan_people.png">

								<div class="right-top-row2-title-base">
									<div>{{ detail.name ? detail.name : '- -' }}{{detail.status==1?'【在职】':'【离职】'}}</div>
									<div>
										<Icon custom="i-icon icon-dianhua1" size="18" color="#eee" />
										{{detail.phonenum ? detail.phonenum : '- -'}}
									</div>
								</div>
							</div>
							<div class="right-top-row2-item">
								<p>工种
									:<span>{{ detail.worktypename || '- -' }}</span></p>
								<p>工号
									:<span>{{ detail.emplnum || '- -' }}</span></p>
							</div>
							<div class="right-top-row2-item">
								<p>民族
									:<span>{{ detail.nation || '- -' }}</span></p>
								<p>性别
									:<span>{{ detail.sex || '- -' }}</span></p>
							</div>
							<div class="right-top-row2-item">
								<p>籍贯
									:<span>{{ detail.nativeplace || '- -' }}</span></p>
								<p>入职日期
									:<span>{{ detail.entrytime ? detail.entrytime.split(' ')[0] : '- -' }}</span></p>
							</div>
						</div>
						<div class="right-top-row3">
							<div class="row3-title">劳保信息</div>
							<div class="row3-cont">
								<div>身高 : {{ detail.personheight || '- -' }}cm</div>
								<div>体重 :{{ detail.personweight || '- -' }}kg</div>
								<div>鞋码 :{{ detail.shoesize || '- -' }}</div>
								<div>工服尺寸 :{{ detail.clothessize || '- -' }}</div>
							</div>
						</div>
					</div>
					<div class="car-popup-cont-left">
						<div class="people-search-detail-left">
							<div class="left-img">
								<img :src="detail.personphoto?detail.personphoto:personImg">
							</div>
							<div class="left-btns">
								<div class="left-btns-item" style="margin-right: 60px;" @click.stop="onClickTrack">
									<Icon custom="i-icon icon-guiji" size="24" />
									历史轨迹
								</div>
								<div class="left-btns-item"
									:style="{'cursor':detail.videoonlinestatus == 0 ? 'pointer' : 'not-allowed','color':detail.videoonlinestatus == 0 ? '#eeeeee' : '#84919e'}"
									@click.stop="onClickVideo">
									<Icon custom="i-icon icon-jiankong11" size="24" />
									摄像头
								</div>
							</div>
						</div>
					</div>

				</div>
				<div class="right-bottom">
					<div class="bottom-work">
						<div class="popup-tab border-bottom work-title">
							<ul>
								<li style="margin-right:5px;" @click.stop="onClickDetailPeopleWork(0)"
									:class="{'current':detailPeopleWorkIndex == 0}">作业概况 </li>
								<li @click.stop="onClickDetailPeopleWork(1)"
									:class="{'current':detailPeopleWorkIndex == 1}">/ 作业记录</li>
								<DatePicker :value="workDate" type="date" style="width: 120px;margin-left: 40px;"
									@on-change="onChangeWorkDate"></DatePicker>
							</ul>
						</div>
						<div class="work-cont noScroll">
							<div v-show="detailPeopleWorkIndex == 0" class="work-cont-record">
								<div class="notData" v-if="workCaseArr.length == 0">
									<img src="../../../../assets/new/detail_no.png">
									<!-- background-image: url(../../../../assets/new/shouji.png); -->
									<p>暂无数据</p>
								</div>
								<div class="record-item record-items" v-for="(item,index) in workCaseArr" :key="index">
									<div class="flex j-between title cont-item record-item-top">
										<p>{{item.shiftName || '--'}}({{getWorkTime(item.planStartTime)}} ~
											{{getWorkTime(item.planEndTime)}})
										</p>
										<div class="record-item-top-box">
											<div class="">作业计划：</div>
											<div class="">{{item.planName}}</div>
										</div>
									</div>
									<div class="flex j-between clock-box cont-item">
										<div class="item">
											<div>{{item.punchCardStartTime || '- -'}}</div>
											<div v-if="item.isLaterIn == 0 && item.isNoWork == 0" class="success">
												<Icon custom="i-icon icon-zhengchang" size="16" />
												正常
											</div>
											<div v-if="item.isNoWork == 1" class="err">
												<Icon custom="i-icon icon-baojing1" size="16" />
												旷工
											</div>
											<div v-if="item.isLaterIn == 1" class="err">
												<Icon custom="i-icon icon-baojing1" size="16" />
												迟到
											</div>
										</div>
										<div class="item">
											<div>{{item.punchCardEndTime || '- -'}}</div>
											<div v-if="item.isLeaveEarly == 0 && item.isNoWork == 0" class="success">
												<Icon custom="i-icon icon-zhengchang" size="16" />
												正常
											</div>
											<div v-if="item.isNoWork == 1" class="err">
												<Icon custom="i-icon icon-baojing1" size="16" />
												旷工
											</div>
											<div v-if="item.isLeaveEarly == 1" class="err">
												<Icon custom="i-icon icon-baojing1" size="16" />
												早退
											</div>
										</div>
									</div>
									<div class="flex j-between cont-item m-b-20 m-t-10">
										<p>网格名称：{{item.gridName}}</p>
										<p>作业时长：{{item.workTotalTime || '- -'}}</p>
									</div>
									<div class="flex a-center cont-item m-b-20">
										<Icon custom="i-icon icon-dizhi1" size="16" />
										<p class="m-l-5">{{item.punchCardAddress || '- -'}}</p>
									</div>
								</div>
							</div>
							<template v-if="detailPeopleWorkIndex == 1">
								<div class="work-case">
									<div class="notData" v-if="workRecordArr.length == 0">
										<img src="../../../../assets/new/detail_no.png">
										<p>暂无数据</p>
									</div>
									<div class="work-cont-points" v-for="(item,index) in workRecordArr" :key="index">
										<ul>
											<li>
												<label>作业对象：</label>
												<span>{{item.gridName || '- -'}}</span>
											</li>
											<!-- 有排班才会显示作业类型，只要道路保洁 -->
											<li v-if="item.jobType">
												<label>作业类型：</label>
												<span>{{item.jobType}}</span>
											</li>
											<li>
												<label>提交时间：</label>
												<span>{{getWorkTime(item.createTime)}}</span>
											</li>
											<li>
												<label>完成情况：</label>
												<span>{{item.content}}</span>
											</li>
										</ul>
										<div class="multimedia">
											<div class="item video-item" v-previewVideo="item.videourl"
												v-if="item.videourl">
												<Icon custom="i-icon icon-bofang" size="25" color='#fff'></Icon>
											</div>
											<div class="item" v-for="(items,indexs) in item.imgurls" :key="indexs">
												<el-image :src="items" fit="cover" :preview-src-list="[items]"
													class="detail-top-img" v-if="item.imgurls.length != 0">
												</el-image>
											</div>
										</div>
									</div>
								</div>
							</template>
						</div>
					</div>
					<div class="bottom-calendar">
						<div class="popup-title border-bottom">
							<div>出勤日历</div>
						</div>
						<div class="calendar workCalendar">
							<el-calendar v-model="workCalendar">
								<template slot="dateCell" slot-scope="{date, data}">
									<!-- 非当月 -->
									<div v-if="data.type != 'current-month'" @click.stop>
									</div>
									<!-- 当月 -->
									<div v-else class="cont"
										:class="{'day-after':isBeyondDate(data.day),'cursor-pointer':getWorkCalendarDate(data.day) || getViolationCalendarDate(data.day),'success':getWorkCalendarDate(data.day)}"
										@click.stop="onClickCalendar(data.day)">
										<p>
											{{ data.day.split('-')[2]}}
										</p>
										<div class="cont-status">
											<!-- <span class="success"
                              v-if="getWorkCalendarDate(data.day) && !getViolationCalendarDate(data.day)"></span> -->
											<span class="err" v-if="getViolationCalendarDate(data.day)"></span>
										</div>
										<div class="cont-dian" v-if="getWorkCalendarDate(data.day)"></div>
									</div>
								</template>
							</el-calendar>
						</div>
						<div class="case noScroll" v-if="calendarCaseVisible">
							<div class="case-date" @click.stop="calendarCaseVisible=false">
								{{workCalendarModalData.date}}
								<Icon custom="i-icon icon-guanbi" size="18" />
							</div>
							<div class="case-cont">
								<div>
									<p>作业状况</p>
									<span :class="[workCalendarModalData.work == 0 ? 'normal' : 'abnormal']">
										<Icon custom="i-icon icon-zhengchang" size="16"
											v-if="workCalendarModalData.work == 0" />
										<Icon custom="i-icon icon-baojing1" size="16" v-else />
										{{workCalendarModalData.work == 0 ? '正常' : '异常'}}
									</span>
								</div>
								<div>
									<p>考勤状况</p>
									<span :class="[workCalendarModalData.violation == 0 ? 'normal' : 'abnormal']">
										<Icon custom="i-icon icon-zhengchang" size="16"
											v-if="workCalendarModalData.violation == 0" />
										<Icon custom="i-icon icon-baojing1" size="16" v-else />
										{{workCalendarModalData.violation == 0 ? '正常' : '异常'}}
									</span>
								</div>
							</div>
							<div class="case-attendance">
								<p class="case-attendance-title">出勤情况</p>
								<ul class="case-attendance-cont">
									<li v-for="(item,index) in workCalendarModalData.workArr" :key="index">
										<p>{{item.shiftName}} {{item.planStartTime}}-{{item.planEndTime}}</p>
										<p>
											上班({{item.punchCardStartTime || '--:--'}}<span v-if="item.isLeaveEarly == 1"
												class="later"> 迟到</span>)
										</p>
										<p>
											下班({{item.punchCardEndTime || '--:--'}}<span v-if="item.isLeaveEarly == 1"
												class="leave"> 早退</span>)
										</p>
									</li>
								</ul>
								<div class="noData" style="padding-top: 26px;"
									v-if="workCalendarModalData.workArr.length == 0">
									<p style="font-size: 16px;">暂无出勤情况</p>
								</div>
							</div>
							<div class="work-violation">
								<p class="work-violation-title">作业违规</p>
								<ul>
									<li v-for="(item,index) in workCalendarModalData.violationArr" :key="index">
										<span></span>
										<p>{{getWorkTime(item.alarmTime)}} {{item.content}}</p>
									</li>
								</ul>
								<div class="noData" v-if="workCalendarModalData.violationArr.length == 0">
									<p>暂无违规情况</p>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</NewSearchDetail>
	</div>
</template>

<script>
	import bus from '@/utils/bus'
	import NewSearchDetail from "./NewSearchDetail.vue";
	import Echarts from '../../../common/Echarts';
	import {
		formatDate
	} from '@/utils/dateRangUtil';
	export default {
		components: {
			NewSearchDetail,
			Echarts
		},
		data() {
			return {
				visible: false,
				dataId: '',
				title: '',
				detail: {},
				detailPeopleWorkIndex: 0,
				personImg: require('../../../../assets/main/personImg.png'),
				// 异常状况
				calendarCaseVisible: false, // 点击页面显示弹框
				workDate: '', // 作业概况 作业记录的日期选择器
				workMonth: [], // 作业日历的月份
				violationDate: [], // 异常日历的月份
				workCaseArr: [], // 作业概况列表
				workRecordArr: [], // 作业记录列表
				workCalendar: new Date(), // 出勤日历
				workCalendarArr: [], // 作业日历列表
				violationCalendarArr: [], // 违规日历列表
				workCalendarModalData: {
					date: '',
					violation: 0, // 0正常，1异常
					work: 0, // 0正常，1异常
					workArr: [],
					violationArr: [],
				}
			}
		},
		watch: {
			dataId(newVal) {
				if (newVal) {
					this.getDetail()
					this.getWorkList()
					this.getWorkCalendarList()
					this.getViolationCalendarList()
				}
			},
			visible(newVal) {
				if (!newVal) {
					this.dataId = ''
					this.detailPeopleWorkIndex = 0
					this.calendarCaseVisible = false
					this.workCalendar = new Date()
					this.timeInit()
				}
			},
			calendarCaseVisible(newVal) {
				if (!newVal) {
					this.workCalendarModalData = {
						date: '',
						violation: 0,
						work: 0,
						workArr: [],
						violationArr: [],
					}
				}
			}
		},
		mounted() {
			this.init()
		},
		methods: {
			init() {
				bus.$on('showMainSearchPersonDetail', data => {
					this.dataId = data.id
					this.title = data.title
					this.visible = true
				})
				this.timeInit()
				// 作业日历组件上个月添加点击事件
				this.$nextTick(() => {
					// 点击前一个月
					let prevBtn = document.querySelector(
						'.workCalendar .el-calendar__button-group .el-button-group>button:nth-child(1)');
					prevBtn.addEventListener('click', () => {
						this.onClickWorkMonthList()
					})
				})
				// 作业日历组件下个月添加点击事件
				this.$nextTick(() => {
					// 点击后一个月
					let prevBtn = document.querySelector(
						'.workCalendar .el-calendar__button-group .el-button-group>button:last-child');
					prevBtn.addEventListener('click', () => {
						this.onClickWorkMonthList()
					})
				})
			},
			getDetail() {
				let params = {
					id: this.dataId
				}
				this.$http.getPersonDetail(params).then((res) => {
					if (res.code == 200) {
						let data = res.result;
						this.detail = data;
						// 使用详情接口返回的绑定账号的id
						if (this.detail.bindaccount) {
							this.getWorkRecordList(this.detail.bindaccount)
						}
					}
				})
			},
			// 获取作业概况
			getWorkList() {
				let params = {
					employeeId: this.dataId,
					workDate: this.workDate
				}
				this.$http.getMapPeosonWorkList(params).then((res) => {
					if (res.code === 200) {
						this.workCaseArr = res.result.list
						this.workCaseArr.forEach(item => {
							let time = this.$timeDifference(item.punchCardStartTime, item.punchCardEndTime)
							if (isNaN(time[0]) && isNaN(time[1])) {
								item.workTotalTime = ''
							} else {
								item.workTotalTime = time[0] > 0 ? time[0] + '小时' + time[1] + '分钟' : time[
									1] + '分钟'
							}
						})
					}
				})
			},
			// 获取作业记录
			getWorkRecordList(id) {
				let params = {
					pageNum: 1,
					pageSize: 99999,
					uId: id,
					nowtime: this.workDate,
				}
				this.$http.getMapWorkRecordList(params).then((res) => {
					if (res.code == 200) {
						this.workRecordArr = res.result.result.rows.map(item => {
							item.imgurls = item.imgurls.split(',').filter(items => items)
							return item
						})
					}
				})
			},
			// 获取作业日历
			getWorkCalendarList() {
				let params = {
					employeeId: this.dataId,
					workMonth: this.workMonth
				}
				this.$http.getMapPeosonWorkList(params).then((res) => {
					if (res.code === 200) {
						this.workCalendarArr = res.result.list
					}
				})
			},
			// 获取违规日历
			getViolationCalendarList() {
				let params = {
					employeeId: this.dataId,
					starttime: this.violationDate[0],
					endtime: this.violationDate[1]
				}
				this.$http.getMapPeosonViolationList(params).then((res) => {
					if (res.code === 200) {
						let data = res.result
						this.violationCalendarArr = data
					}
				})
			},
			// 作业日历点击上月下月触发
			onClickWorkMonthList() {
				// 作业
				let timeArr = formatDate(this.workCalendar).split('-')
				this.workMonth = timeArr[0] + '-' + timeArr[1]
				// 违规
				let day = new Date(timeArr[0], timeArr[1], 0)
				let startTime = timeArr[0] + '-' + timeArr[1] + '-01 00:00:00'
				let endTime = timeArr[0] + '-' + timeArr[1] + '-' + day.getDate() + ' 23:59:59'
				this.violationDate = [startTime, endTime]
				this.getWorkCalendarList()
				this.getViolationCalendarList()
			},
			timeInit() {
				let time = formatDate(new Date())
				let timeArr = time.split('-')
				this.workDate = time
				this.workMonth = timeArr[0] + '-' + timeArr[1]

				let lastDay = new Date(timeArr[0], timeArr[1], 0)
				let startTime = timeArr[0] + '-' + timeArr[1] + "-01 00:00:00"
				let endTime = timeArr[0] + '-' + timeArr[1] + '-' + lastDay.getDate() + ' 23:59:59'
				this.violationDate = [startTime, endTime]
			},
			// 人员详情 工作tab切换
			onClickDetailPeopleWork(i) {
				this.detailPeopleWorkIndex = i
			},
			// 点击日历某一天
			onClickCalendar(date) {
				if (!this.getWorkCalendarDate(date) && !this.getViolationCalendarDate(date)) return
				// 当天有排班的考勤段列表
				let workArr = []
				this.workCalendarArr.forEach(item => {
					if (item.workDate == date) {
						// 出勤情况是否异常
						if (item.isLaterIn == 1 || item.isLeaveEarly == 1 || item.isNoWork == 1) {
							this.workCalendarModalData.work = 1
						}
						// 出勤情况
						workArr.push({
							shiftName: item.shiftName,
							planStartTime: this.getWorkTime(item.planStartTime),
							planEndTime: this.getWorkTime(item.planEndTime),
							punchCardStartTime: item.punchCardStartTime,
							punchCardEndTime: item.punchCardEndTime,
							isLaterIn: item.isLaterIn,
							isLeaveEarly: item.isLeaveEarly,
							isNoWork: item.isNoWork,
						})
					}
				})
				this.workCalendarModalData.workArr = workArr
				// 作业状况是否异常
				let violation = this.getViolationCalendarDate(date)
				if (violation) {
					this.workCalendarModalData.violation = 1
				}

				// 违规情况
				let arr = []
				this.violationCalendarArr.forEach(item => {
					if (item.alarmTime.split(' ')[0] == date) {
						arr.push(item)
					}
				})
				this.workCalendarModalData.violationArr = arr
				this.workCalendarModalData.date = date
				this.calendarCaseVisible = true
			},
			// 是否超出日期
			isBeyondDate(date) {
				return formatDate(new Date()) < date
			},
			// 某天是否有排班
			getWorkCalendarDate(date) {
				return this.workCalendarArr.find(item => item.workDate.split(' ')[0] == date)
			},
			// 某天是否有异常
			getViolationCalendarDate(date) {
				return this.violationCalendarArr.find(item => item.alarmTime.split(' ')[0] == date)
			},
			// 作业记录 作业概况选择日期
			onChangeWorkDate(date) {
				this.workDate = date
				this.getWorkList()
			},
			// 作业概况时间 去掉年月日
			getWorkTime(time) {
				if (time) {
					let arr = time.split(' ')
					let date = arr[1].split(':')
					date.splice(2, 1)
					return date.join(':')
				} else {
					return ''
				}
			},
			// 摄像头
			onClickVideo() {
				if (this.detail.videoonlinestatus == 0) {
					let params = {
						equipcode: this.detail.equipcode,
						eqptype: this.detail.eqptype,
						details: this.detail.channels,
					}
					bus.$emit('showPlayVideoModal', params)
				}
			},
			// 轨迹
			onClickTrack() {
				let name = `${this.detail.name}[${this.detail.worktypename}]`
				const {
					href
				} = this.$router.resolve({
					name: 'newTrack',
					query: {
						type: 'person',
						id: this.detail.id,
						carType: '',
						name: name
					}
				})
				// const {
				// 	href
				// } = this.$router.resolve({
				// 	name: 'track',
				// 	query: {
				// 		type: 'person',
				// 		id: this.detail.id,
				// 		name: name,
				// 		carType: ''
				// 	}
				// })
				window.open(href, '_blank')
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/scss/iviewCssReset/input";
	@import "@/scss/iviewCssReset/modal";
	@import "@/scss/iviewCssReset/elCalendar";
	@import "@/scss/iviewCssReset/datePicker";

	.car-popup-cont-left {
		margin-right: 5px;
		width: 746px;
		height: 570px;
		background-image: url(../../../../assets/new/wc-border.png);
		background-size: 100% 100%;
	}

	.car-popup-cont-right {
		display: flex;
	}

	/* 人员左 */
	.people-search-detail-left {
		overflow: hidden;

		.left-img {
			display: flex;
			justify-content: center;
			margin-top: 40px;
			margin-bottom: 40px;
			padding: 0 30px;
			width: 100%;

			img {
				max-width: 680px;
				height: 370px;
				margin-top: 20px;
			}
		}

		.left-btns {
			display: flex;
			justify-content: center;
			margin: 0 80px;

			.left-btns-item {
				display: flex;
				justify-content: center;
				color: #ffffff;
				cursor: pointer;
				width: 120px;
				height: 45px;
				background: rgba(30, 176, 252, 0.35);
				border: 1px solid #1eb0fc;
				border-radius: 4px;
				line-height: 45px;
				font-size: 14px;

				.ivu-icon {
					line-height: 1.9;
				}
			}
		}
	}

	/* 人员右 */
	.people-search-detail-right {
		.right-top {
			width: 748px;
			height: 220px;
			background-image: url(../../../../assets/new/trash.png);
			background-size: 100% 100%;
			overflow: hidden;

			// border: 1px solid rgba(255, 255, 255, 0.1);
			.right-top-nav {
				margin: 14px 0 0 11px;
			}

			.right-top-row2 {
				display: flex;
				box-sizing: border-box;
				padding: 16px 24px;
				color: rgba(255, 255, 255, 0.7);

				.right-top-row2-title {
					width: 220px;
					display: flex;

					img {
						margin-right: 20px;
						width: 60px;
						height: 60px;
						border-radius: 62px;
						cursor: default;
						background-size: 100% 100%;
					}

					.right-top-row2-title-base {
						div:first-child {
							margin-bottom: 10px;
							color: #eee;
							font-size: 18px;
						}
					}
				}

				.right-top-row2-item {
					width: 23%;

					p {
						margin-top: 6px;
						margin-bottom: 10px;

						span {
							color: #eee;
							margin-left: 5px;
						}
					}
				}
			}

			.right-top-row3 {
				height: 55px;
				display: flex;
				align-items: center;
				// background-color: rgba(255, 255, 255, 0.1);
				color: rgba(255, 255, 255, 0.7);

				.row3-title {
					// background-color: rgba(255, 255, 255, 0.2);
					width: 110px;
					text-align: center;
					height: 55px;
					line-height: 55px;
					color: #1eb0fc;
					font-size: 16px;
					font-weight: 500;
				}

				.row3-cont {
					flex: 1;
					display: flex;
					justify-content: space-around;
					font-size: 16px;
					font-weight: 500;
					color: #ffffff;
					line-height: 55px;
					height: 55px;
					margin: 0 37px;

					div {}
				}
			}
		}
	}

	/* 右侧公共样式 */
	.detail-popup-right {

		/* 详情公共样式 stard */
		.popup-tab {
			display: flex;
			justify-content: space-between;
			padding: 0 24px;
			height: 51px;
			align-items: center;

			.current {
				color: #25bb96 !important;
			}
		}

		.popup-title {
			font-size: 16px;

			font-weight: bold;
			color: #23cefd;
			line-height: 48px;

			padding-left: 20px;
			background-image: url(../../../../assets/new/titlebox.png);
			width: 206px;
			height: 46px;
			background-size: 100% 100%;
			margin-left: 11px;
			// margin-top: 14px;
			// height: 51px;
			// line-height: 51px;
			// color: #eee;
			// font-size: 20px;
			// padding-left: 20px;

			// display: flex;

			.current {
				color: #25bb96;
				position: relative;
			}

			.current::after {
				content: "";
				position: absolute;
				bottom: 8px;
				left: 50%;
				transform: translateX(-50%);
				width: 0;
				height: 0;
				border-left: 5px solid transparent;
				border-right: 5px solid transparent;
				border-bottom: 4px solid #25bb96;
			}
		}

		.popup-title::after {
			content: "";
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 1px;
			box-sizing: border-box;
			border-left: 3px solid #fff;
			border-right: 3px solid #fff;
			background: rgba(255, 255, 255, 0.1);
		}

		.border-bottom {
			position: relative;
		}

		.border-bottom::after {
			content: "";
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 1px;
			box-sizing: border-box;
			border-left: 3px solid #fff;
			border-right: 3px solid #fff;
			background: rgba(255, 255, 255, 0.1);
		}

		/* 人员右侧下方 */
		.right-bottom {
			margin-top: 10px;
			display: flex;
			justify-content: space-between;
			min-height: 350px;
			width: 454px;
			height: 466px;
			background-image: url(../../../../assets/new/wc-border2.png);
			background-size: 100% 100%;

			.bottom-work {
				// border: 1px solid rgba(255, 255, 255, 0.1);
				width: 454px;
				height: 390px;
				background-image: url(../../../../assets/new/wc-border2.png);
				background-size: 100% 100%;

				.work-title {
					ul {
						display: flex;
						align-items: center;
						flex: 2;

						li {
							flex: 1;
							font-size: 18px;
							color: #fff;
							// font-weight: bold;
							cursor: pointer;
						}
					}
				}

				.work-cont {
					height: 435px;
					color: #ffffff;
					box-sizing: border-box;
					overflow-y: auto;

					// 作业记录
					.work-cont-points {
						margin-bottom: 10px;

						ul {
							li {
								margin-bottom: 10px;
							}
						}

						.multimedia {
							display: flex;
							flex-wrap: wrap;

							.item {
								width: 32%;
								margin-right: 2%;

								img {
									width: 100%;
								}
							}

							.item:nth-child(3n) {
								margin-right: 0;
							}

							.video-item {
								position: relative;
								background: #797979;

								i {
									position: absolute;
									left: 50%;
									top: 50%;
									transform: translate(-50%, -50%);
								}
							}
						}
					}

					// 作业概况
					.work-cont-record {
						.record-item {
							padding: 0 20px;

							.record-item-top {
								height: 40px;
								background-color: rgba(30, 176, 252, .25);
							}

							.cont-item {
								padding: 0 16px;
							}

							.title {
								height: 48px;
								line-height: 48px;
								font-size: 16px;
								color: #fff;
								background: #454c52;
							}

							.clock-box {
								display: flex;
								justify-content: space-between;
								padding: 16px;

								.item {
									width: 152px;
									height: 30px;
									border: 1px solid rgba(255, 255, 255, 0.2);
									border-radius: 16px;
									display: flex;
									justify-content: space-between;
									align-items: center;
									color: #fff;

									div {
										display: flex;
										justify-content: center;
										align-items: center;
										height: 30px;
										width: 49%;
										vertical-align: middle;
										font-size: 12px;
									}

									div:first-child {
										border-right: 1px solid rgba(255, 255, 255, 0.2);
									}

									.success {
										color: rgba(255, 255, 255, 0.4);
									}

									.err {
										color: rgb(235, 97, 0);
									}
								}
							}
						}
					}
				}
			}

			.bottom-calendar {
				position: relative;

				// border: 1px solid rgba(255, 255, 255, 0.1);
				width: 454px;
				height: 400px;
				background-image: url(../../../../assets/new/wc-border2.png);
				background-size: 100% 100%;


				.popup-title {
					div {
						margin-right: 20px;
						cursor: pointer;
					}
				}

				// 日历组件
				.calendar {
					.cont {
						.cont-status {
							span {
								display: inline-block;
								width: 8px;
								height: 8px;
								border-radius: 8px;
								text-align: center;
							}

							.err {
								background: #f68315;
							}

							.success {
								// background: rgba(255, 255, 255, 0.4);
							}
						}
					}

					.success {
						color: #fff;

						p {
							background: #25bb96;
						}
					}
				}

			}
		}

		/* 详情公共样式 end */
	}

	.bottom-work {
		// border: 1px solid rgba(255, 255, 255, 0.1);
		width: 454px;
		height: 390px;
		background-image: url(../../../../assets/new/wc-border2.png);
		background-size: 100% 100%;
		overflow: hidden;

		.work-title {
			background-image: url(../../../../assets/new/detail_nav_426.png);
			width: 426px;
			height: 46px;
			background-size: 100% 100%;
			margin: 17px 0 0 14px;

			line-height: 45px;

			ul {
				display: flex;
				align-items: center;
				flex: 1;
				padding-left: 20px;
				padding: 1px 10px;
				line-height: 45px;
				margin-left: 10px;

				li {
					// flex: 1;
					font-size: 16px;
					color: #fff;
					// font-weight: bold;
					cursor: pointer;
				}

				.current {
					font-weight: bold;
					color: #23cefd;
					cursor: pointer;
				}
			}

			::v-deep {
				.ivu-date-picker-rel .ivu-input {
					background-color: rgba(0, 0, 0, 0);
					border: 1px solid rgba(0, 0, 0, 0);
				}
			}
		}
	}

	.bottom-calendar {
		position: relative;

		// border: 1px solid rgba(255, 255, 255, 0.1);
		width: 454px;
		height: 400px;
		background-image: url(../../../../assets/new/wc-border2.png);
		background-size: 100% 100%;
		overflow: hidden;

		.popup-title {
			div {
				margin-right: 20px;
				cursor: pointer;
			}
		}
	}

	.popup-title {
		font-size: 16px;

		font-weight: bold;
		color: #fff;
		line-height: 48px;

		padding-left: 20px;
		background-image: url(../../../../assets/new/people.png);
		width: 366px;
		height: 46px;
		background-size: 100% 100%;
		margin-left: 11px;
		margin-top: 14px;
		// height: 51px;
		// line-height: 51px;
		// color: #eee;
		// font-size: 20px;
		// padding-left: 20px;

		// display: flex;

		.current {
			color: #25bb96;
			position: relative;
		}
	}

	.noData {
		padding-top: 90px;

		img {
			width: 138px;
			height: 138px;
			margin: 0;
		}

		p {
			font-size: 18px;
			color: #FFFFFF;
		}
	}

	.noData p {
		font-size: 18px;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 40px;
		margin-bottom: 30px;
	}

	.record-items {
		color: #FFFFFF;
		padding-left: 20px;
	}

	.record-item-top {
		// height: 40px;
		// line-height: 40px;
		color: #FFFFFF;
		background-color: rgba(30, 176, 252, .25);
		padding: 10px;

		p:first-child {
			width: 140px;
			margin-right: 10px;
		}

		.record-item-top-box {
			display: flex;

			// align-items: center;
			div:first-child {
				width: 72px;
			}

			div:last-child {
				flex: 1;
			}
		}
	}

	.work-cont-record {
		width: 442px;
		height: 300px;
		overflow: auto;
	}

	.work-cont-record::-webkit-scrollbar {
		width: 5px;
	}

	.work-cont-record::-webkit-scrollbar-thumb {
		background-color: #CCCCCC;
	}

	.work-case {
		width: 442px;
		height: 380px;
		overflow: auto;
	}

	.work-case::-webkit-scrollbar {
		width: 5px;
	}

	.work-case::-webkit-scrollbar-thumb {
		background-color: #CCCCCC;
	}

	// 弹框
	.case {
		position: absolute;
		top: 0;
		left: 0;
		width: 454px;
		height: 400px;
		background: url(../../../../assets/new/detail_rili_bgc.png) 0 0 no-repeat;
		background-size: 100% 100%;
		overflow-y: auto;

		.case-date {
			width: 366px;
			height: 46px;
			line-height: 46px;
			font-size: 16px;
			color: #FFFFFF;
			font-weight: 500;
			background: url(../../../../assets/new/detail_nav_366.png) 0 0 no-repeat;
			background-size: 100% 100%;
			padding-left: 26px;
			margin: 17px 0 0 14px;

			i {
				cursor: pointer;
				position: absolute;
				top: 30px;
				right: 30px;
			}
		}

		.case-cont {
			display: flex;
			align-items: center;
			height: 60px;
			padding: 0 25px;
			margin: 0 5px;
			border-bottom: 1px solid rgba(255, 255, 255, 0.2);

			div {
				flex: 1;

				p {
					color: #eee;
					margin-bottom: 4px;
				}

				.normal {
					color: #1EB0FC;
				}

				.abnormal {
					color: rgb(235, 97, 0);
				}
			}
		}

		.case-attendance {
			height: 170px;
			padding: 10px 15px;
			margin: 0 5px;
			color: rgba(255, 255, 255, 0.7);
			border-bottom: 1px solid rgba(255, 255, 255, 0.2);
			overflow: auto;

			.case-attendance-title {
				display: flex;
				justify-content: space-between;
				height: 32px;
				align-items: center;
				padding-right: 10px;
				color: #eee;
			}

			.case-attendance-cont {
				li {
					display: flex;
					justify-content: space-between;
					margin-bottom: 10px;

					p {

						// flex: 1;
						.later {
							color: #ff0000;
						}

						.leave {
							color: yellow;
						}
					}
				}
			}
		}

		.work-violation {
			height: 100px;
			padding: 5px 20px;
			color: rgba(255, 255, 255, 0.7);
			overflow: auto;

			.work-violation-title {
				display: flex;
				justify-content: space-between;
				height: 32px;
				align-items: center;
				padding-right: 10px;
				color: #eee;
				// margin-bottom: 12px;
			}

			ul {
				li {
					display: flex;
					align-items: center;
					line-height: 25px;

					span {
						width: 10px;
						height: 10px;
						margin-right: 5px;
						display: inline-block;
						background: #f68315;
						border-radius: 50%;
					}
				}
			}
		}
	}

	.notData {
		font-size: 16px;
		color: #FFFFFF;
		text-align: center;
		padding: 0;
		margin-top: 40px;

		img {
			width: 160px;
			height: 160px;
			margin: 0;
		}
	}
	.cont-dian{
		width: 8px;
		height: 8px;
		border-radius: 8px;
		text-align: center;
		background: #eb6100;
		margin: 0 auto;
	}

	::v-deep {
		.ivu-date-picker-rel .ivu-icon {
			color: rgba(13, 128, 235, 1);
			font-size: 16px;
		}

		.el-calendar__header {
			padding: 4px 20px;
		}

		.el-calendar .el-calendar__body .el-calendar-table__row td .el-calendar-day {
			height: 42px;
		}

		.el-calendar-table thead th {
			padding: 8px 0;
		}

		.el-calendar .el-calendar__body .el-calendar-table__row td .el-calendar-day .cont p {
			width: 26px;
			height: 26px;
			line-height: 26px;
		}

		.el-calendar .el-calendar__body .el-calendar-table__row td .el-calendar-day .cont .cont-status {
			line-height: 16px;
		}
	}
</style>
